<div class="layui-fluid">
  <div class="layui-row">
    <div class="layui-col-xs12">
      <div class="layui-card">
        <div class="layui-card-header">选项卡-> 文档请参考：
          <a href="http://www.layui.com/doc/element/tab.html" target="_blank">
            <span>http://www.layui.com/doc/element/tab.html</span>
          </a>
        </div>
        <div class="layui-card-body">

          <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
            <legend>默认风格的Tab</legend>
          </fieldset>

          <div class="layui-tab">
            <ul class="layui-tab-title">
              <li class="layui-this">网站设置</li>
              <li>用户管理</li>
              <li>权限分配</li>
              <li>商品管理</li>
              <li>订单管理</li>
            </ul>
            <div class="layui-tab-content">
              <div class="layui-tab-item layui-show">
                1. 高度默认自适应，也可以随意固宽。
                <br>2. Tab进行了响应式处理，所以无需担心数量多少。
              </div>
              <div class="layui-tab-item">内容2</div>
              <div class="layui-tab-item">内容3</div>
              <div class="layui-tab-item">内容4</div>
              <div class="layui-tab-item">内容5</div>
            </div>
          </div>
          <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
            <legend>动态操作Tab</legend>
          </fieldset>

          <div class="layui-tab" lay-filter="demo_hash" lay-allowclose="true">
            <ul class="layui-tab-title">
              <li class="layui-this" lay-id="11">网站设置</li>
              <li lay-id="22">用户管理</li>
              <li lay-id="33">权限分配</li>
              <li lay-id="44">商品管理</li>
              <li lay-id="55">订单管理</li>
            </ul>
            <div class="layui-tab-content">
              <div class="layui-tab-item layui-show">内容1</div>
              <div class="layui-tab-item">内容2</div>
              <div class="layui-tab-item">内容3</div>
              <div class="layui-tab-item">内容4</div>
              <div class="layui-tab-item">内容5</div>
            </div>
          </div>
          <div class="site-demo_hash-button" style="margin-bottom: 0;">
            <button class="layui-btn site-demo_hash-active" data-type="tabAdd">新增Tab项</button>
            <button class="layui-btn site-demo_hash-active" data-type="tabDelete">删除：商品管理</button>
            <button class="layui-btn site-demo_hash-active" data-type="tabChange">切换到：用户管理</button>
          </div>

          <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
            <legend>Hash地址定位</legend>
          </fieldset>
          <div class="layui-tab" lay-filter="test_hash">
            <ul class="layui-tab-title">
              <li class="layui-this" lay-id="11">网站设置</li>
              <li lay-id="22">用户管理</li>
              <li lay-id="33">权限分配</li>
              <li lay-id="44">商品管理</li>
              <li lay-id="55">订单管理</li>
            </ul>
            <div class="layui-tab-content">
              <div class="layui-tab-item layui-show">
                点击该Tab的任一标题，观察地址栏变化，再刷新页面。选项卡将会自动定位到上一次切换的项
              </div>
              <div class="layui-tab-item">内容2</div>
              <div class="layui-tab-item">内容3</div>
              <div class="layui-tab-item">内容4</div>
              <div class="layui-tab-item">内容5</div>
            </div>
          </div>

          <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
            <legend>简洁风格的Tab</legend>
          </fieldset>

          <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
            <ul class="layui-tab-title">
              <li class="layui-this">网站设置</li>
              <li>用户管理</li>
              <li>权限分配</li>
              <li>商品管理</li>
              <li>订单管理</li>
            </ul>
            <div class="layui-tab-content" style="height: 100px;">
              <div class="layui-tab-item layui-show">内容不一样是要有，因为你可以监听tab事件（阅读下文档就是了）</div>
              <div class="layui-tab-item">内容2</div>
              <div class="layui-tab-item">内容3</div>
              <div class="layui-tab-item">内容4</div>
              <div class="layui-tab-item">内容5</div>
            </div>
          </div>

          <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
            <legend>卡片风格的Tab</legend>
          </fieldset>

          <div class="layui-tab layui-tab-card">
            <ul class="layui-tab-title">
              <li class="layui-this">网站设置</li>
              <li>用户管理</li>
              <li>权限分配</li>
              <li>商品管理</li>
              <li>订单管理</li>
            </ul>
            <div class="layui-tab-content" style="height: 100px;">
              <div class="layui-tab-item layui-show">默认宽度是相对于父元素100%适应的，你也可以固定宽度。</div>
              <div class="layui-tab-item">2</div>
              <div class="layui-tab-item">3</div>
              <div class="layui-tab-item">4</div>
              <div class="layui-tab-item">5</div>
              <div class="layui-tab-item">6</div>
            </div>
          </div>

          <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
            <legend>当Tab数超过一定宽度</legend>
          </fieldset>

          <div class="layui-tab layui-tab-card" style="width: 290px;">
            <ul class="layui-tab-title">
              <li class="layui-this">网站设置</li>
              <li>用户管理</li>
              <li>权限分配</li>
              <li>商品管理</li>
              <li>订单管理</li>
            </ul>
            <div class="layui-tab-content" style="height: 100px;">
              <div class="layui-tab-item layui-show">
                1. 宽度足够，就不会出现右上图标；宽度不够，就会开启展开功能。
                <br>2. 如果你的宽度是自适应的，Tab会自动判断是否需要展开，并适用于所有风格。
              </div>
              <div class="layui-tab-item">2</div>
              <div class="layui-tab-item">3</div>
              <div class="layui-tab-item">4</div>
              <div class="layui-tab-item">5</div>
              <div class="layui-tab-item">6</div>
            </div>
          </div>

          <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
            <legend>带删除功能的Tab</legend>
          </fieldset>

          <div class="layui-tab layui-tab-card" lay-allowclose="true">
            <ul class="layui-tab-title">
              <li class="layui-this">网站设置</li>
              <li>用户基本管理</li>
              <li>权限分配</li>
              <li>商品管理</li>
              <li>订单管理</li>
            </ul>
            <div class="layui-tab-content" style="height: 150px;">
              <div class="layui-tab-item layui-show">
                1. 我个人比较喜欢卡片风格的，所以你发现又是以卡片的风格举例 2. 删除功能适用于所有风格
              </div>
              <div class="layui-tab-item">2</div>
              <div class="layui-tab-item">3</div>
              <div class="layui-tab-item">4</div>
              <div class="layui-tab-item">5</div>
              <div class="layui-tab-item">6</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


<script>
  layui.use('element', function() {
    var $ = layui.jquery,
      element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块

    element.init();

    //触发事件
    var active = {
      tabAdd: function() {
        //新增一个Tab项
        element.tabAdd('demo_hash', {
          title: '新选项' + (Math.random() * 1000 | 0) //用于演示
            ,
          content: '内容' + (Math.random() * 1000 | 0),
          id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下
        })
      },
      tabDelete: function(othis) {
        //删除指定Tab项
        element.tabDelete('demo_hash', '44'); //删除：“商品管理”


        othis.addClass('layui-btn-disabled');
      },
      tabChange: function() {
        //切换到指定Tab项
        element.tabChange('demo_hash', '22'); //切换到：用户管理
      }
    };

    $('.site-demo_hash-active').on('click', function() {
      var othis = $(this),
        type = othis.data('type');
      active[type] ? active[type].call(this, othis) : '';
    });

    //Hash地址的定位
    var layid = location.hash.replace(/^#test_hash=/, '');
    element.tabChange('test_hash', layid);

    element.on('tab(test_hash)', function(elem) {
      location.hash = 'test_hash=' + $(this).attr('lay-id');
    });

  });
</script>

<style scoped>

</style>